<template>
  <div class='vdrcontainer'>
    <vdr
        :w="200"
        :h="600"
        :debug="false"
        :min-width="20"
        :min-height="20"
        :isConflictCheck="false"
        :snap="true"
        :snapTolerance="10"
        :scaleRatio="1"
        :x="100"
        :y="100"
        class="vdrclass"
      >
        <div
          style="
            background-color: white;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          "
        >
          <div
            style="height: 30px; background-color: #555; cursor: move"
            id="dragpannel"
          >
            <i
              class="el-icon-close"
              style="cursor: pointer; position: absolute; right: 7px; top: 7px"
              @click="$parent.iflujing = false"
            ></i>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <span> 路径： </span>

            <el-select
              v-model="sellujing"
              placeholder="请选择"
              @change="lujingchange()"
            >
              <el-option
                v-for="item in lujingoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <el-button type="primary" @click="playy(!playing)"
              >播放/暂停</el-button
            >
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <el-button type="primary" @click="cameraAttachedClick"
              >相机绑定</el-button
            >
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <span @click="show = !show" class="checkbox">
              <input
                class="fly"
                type="checkbox"
                v-model="show"
              />&nbsp;&nbsp;&nbsp;&nbsp;路径显隐
            </span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <el-popover placement="top-start" width="200" trigger="click">
              <span>
                <input
                  type="range"
                  min="0"
                  max="1000"
                  step="1"
                  v-model.number="currentSpeed"
                />
              </span>

              <div slot="reference">
                <span>当前速度: {{ currentSpeed }}m/s</span>
              </div>
            </el-popover>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <span>当前位置：{{ currentD | numFilter }}米</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              padding: 5px 10px;
            "
          >
            <el-button
              type="primary"
              @click="$root._earth.cameraViewManager.views[0].flyTo()"
              >顶部视角</el-button
            >
          </div>
        </div>
      </vdr>
  </div>
</template>
<script>

import guangzhui from "./guangzhuimixins";
import vdr from "@/views/peizhihua/components/vdr/src";

export default {
  name: "lujingcom",
  components: { vdr },

  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  
  mixins: [guangzhui],
  data() {
    return {
      lujingoptions: [],
      lujingkv: [],
      sellujing: "",
      // iflujing: false,
      show: false, // 控制路径的显示与隐藏，默认为隐藏
      // 当前播放速度，单位为米/秒。
      // 注意，此属性可以实时修改，修改后的速度立即生效，所以可以动态修改路径上物体的前进速度！
      currentSpeed: 10,
      // 当前步进距离
      // 指当前播放状态下由第一个关键点沿路径运动到当前位置的长度，单位是米。
      // 当前playing属性为false时，此属性恒定不变；当playing为true，此属性会自动增加。 随着currentD的变化，会实时计算currentPosition、currentRotation这两个属性。 currentPosition指当前位置，currentRotation指当前姿态
      currentD: 0,
      playing: true,
      cameraAttached: false,
    };
  },
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    this.loaddata()
  },
  methods: {
    lujingchange() {
      this.bindval();
    },

    loaddata() {
      if (_.has(this.$root._earth, "sceneTree")) {
        this.$root._earth.sceneTree.root.children.map((item) => {
          if (item.czmObject.xbsjType == "Path") {
            console.log(item.czmObject.name);
            this.lujingoptions.push({
              label: item.czmObject.name,
              value: item.ref,
            });
            this.lujingkv[item.ref] =
              this.$root._earth.sceneTree.$refs[item.ref].czmObject;
          }
        });

        this.sellujing = this.lujingoptions[1].value;

        this.bindval();
      } else {
        setTimeout(() => {
          this.loaddata();
        }, 100);
      }
    },
    bindval() {
      //解绑
      this.playing = false;

      this._showUnbind = this._showUnbind && this._showUnbind();
      this._currentSpeedUnbind =
        this._currentSpeedUnbind && this._currentSpeedUnbind();
      this._currentDUnbind = this._currentDUnbind && this._currentDUnbind();
      this._cameraAttachedUnbind =
        this._cameraAttachedUnbind && this._cameraAttachedUnbind();
      this._playingUnbind = this._playingUnbind && this._playingUnbind();
      this._uw1 = this._uw1 && this._uw1();
      this._uw2 = this._uw2 && this._uw2();

      //添加所有路径
      var path1 = this.lujingkv[this.sellujing];
      this._showUnbind = XE.MVVM.bind(this, "show", path1, "show");
      this._currentSpeedUnbind = XE.MVVM.bind(
        this,
        "currentSpeed",
        path1,
        "currentSpeed"
      );
      this._currentDUnbind = XE.MVVM.bind(this, "currentD", path1, "currentD");
      this._cameraAttachedUnbind = XE.MVVM.bind(
        this,
        "cameraAttached",
        path1,
        "cameraAttached"
      );
      this._playingUnbind = XE.MVVM.bind(this, "playing", path1, "playing");

      path1.viewDistance = 300;
      path1.cameraAttachedOffsetRotation = [0, 50, 0];

      var model1 = this.$root._earth.sceneTree.$refs.model1.czmObject;
      // 1.1.4 数据监控
      // currentPosition 当前相机位置，形式如：[0, 0, 0] 该数组中的元素分别表示经度（单位弧度）、纬度（单位弧度）、高度（单位米）。 注意该属性，为只读属性！
      this._uw1 = XE.MVVM.watch(path1, "currentPosition", (position) => {
        //添加模型位置变化
        model1.xbsjPosition = [...position];
        //添加光锥
        this.loadguangzhui1(position);
      });

      // currentRotation 当前相机姿态，形式如：[0, 0, 0] 该数组中的元素分别表示偏航角（单位弧度）、俯仰角（单位弧度）、翻转角（单位弧度）。 注意该属性，为只读属性！
      this._uw2 = XE.MVVM.watch(path1, "currentRotation", (rotation) => {
        var cp = [...rotation];
        model1.xbsjRotation = [cp[0] - Math.PI * 0.5, cp[1], cp[2]];
      });
    },

    cameraAttachedClick() {
      this.cameraAttached = !this.cameraAttached;
      // 飞回原始位置
      if (!this.cameraAttached && _.has(this.$root._earth, "sceneTree")) {
        this.$root._earth.cameraViewManager.views[0].flyTo();
      }
    },
    playy(newValue) {
      this.playing = newValue;
    },
  },
}
</script>
<style lang='scss' scoped>

.vdrcontainer {
  width: calc(100vw);
  height: calc(100vh);
  position: fixed;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.vdrclass {
  pointer-events: auto;
  cursor: pointer;
}

</style>